<script setup>
import UserLayout from "./UserLayout.vue";
import { ref } from 'vue';
import PostItem from "@/components/PostItem.vue";
import {
  createCollectCategory,
  deleteCollectCategory,
  getCollectCategories,
  getCollectsPostService, getPostByCategory,
  updateCollectCategory
} from "@/api/postInfo.js";

import { ElMessage, ElMessageBox } from 'element-plus'

const posts = ref([
  {
    id: 1,
    author: {
      id:1 ,
      avatar: '',
      name: '',
      introduced: ''
    },
    title: "",
    content: "",
    cover: '',
    tags: [],
    likeCount: 0,
  },
])

const getPosts = async () => {
  const res = await getCollectsPostService()
  posts.value = res.data.data
  showFavorites.value = false
}
getPosts()

// 处理点赞
const handleLike = ({id, liked}) => {
  const post = posts.value.find(p => p.id === id)
  if (post) {
    post.likes += liked ? 1 : -1
    post.liked = liked
  }
}

// 切换展开状态
const toggleExpand = (postId) => {
  const post = posts.value.find(p => p.id === postId)
  if (post) post.expanded = !post.expanded
}

//收藏夹
const showFavorites = ref(false)
const showCreateDialog = ref(false)
const showEditDialog = ref(false)
const favorites = ref([])
const editingFavorite = ref({})
const newFavorite = ref({ name: '', describe: '' })

// 获取收藏夹列表
const getFavorites = async () => {
  try {
    const res = await getCollectCategories()
    favorites.value = res.data.data
    console.log(favorites.value.length)
  } catch (e) {
    console.log('加载失败'+e)
  }
}
getFavorites()

const showPostByFavorite = async (fav) => {
  console.log("..."+fav.id)
  const res = await getPostByCategory(fav.id)
  console.log(res.data.data)
  posts.value = res.data.data
  showFavorites.value = false

}
const openEditDialog = (fav) => {
  editingFavorite.value = fav
  showEditDialog.value = true
}

// 创建收藏夹
const createFavorite = async () => {
  try {
    await createCollectCategory(newFavorite.value)
    showCreateDialog.value = false
    await getFavorites()
    newFavorite.value = { name: '', describe: '' }
    ElMessage.success('创建成功')
  } catch (err) {
    console.error('创建失败'+err)
  }
}

// 更新收藏夹
const updateFavorite = async () => {
  try {
    await updateCollectCategory(editingFavorite.value)
    await getFavorites()
    showEditDialog.value = false
    ElMessage.success('更新成功')
  } catch (err) {
    console.error('更新失败'+err)
  }
}

// 删除确认
const confirmDelete = async () => {
  try {
    await ElMessageBox.confirm('确定删除该收藏夹吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteCollectCategory(editingFavorite.value.id)
    await getFavorites()
    showEditDialog.value = false
    ElMessage.success('删除成功')
  } catch (err) {
    // 取消删除
    console.log("删除失败"+err)
  }
}
</script>

<template>
  <UserLayout>
    <!-- 收藏按钮 -->
    <el-button @click="showFavorites=true">⭐ 收藏</el-button>

    <!-- 收藏夹选择对话框 -->
    <el-dialog v-model="showFavorites" title="我的收藏夹">
      <el-button @click="getPosts">查看</el-button>
      <div class="favorite-list">
        <div
          v-for="fav in favorites"
          :key="fav.id"
          class="favorite-item"
          @click="openFavorite(fav.id)"
        >
          <h3>{{ fav.name }}</h3>
          {{fav.num}}
          <p class="description">{{ fav.describe }}</p>
          <div class="actions">
            <el-button @click.stop="openEditDialog(fav)">编辑</el-button>
            <el-button @click.stop="showPostByFavorite(fav)">查看</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showCreateDialog = true">新建收藏夹</el-button>
      </template>
    </el-dialog>

    <!-- 创建收藏夹对话框 -->
    <el-dialog v-model="showCreateDialog" title="新建收藏夹">
      <el-form :model="newFavorite">
        <el-form-item label="名称">
          <el-input v-model="newFavorite.name" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="newFavorite.describe" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="createFavorite">创建</el-button>
      </template>
    </el-dialog>

    <!-- 编辑收藏夹对话框 -->
    <el-dialog v-model="showEditDialog" title="编辑收藏夹">
      <el-form :model="editingFavorite">
        <el-form-item label="名称">
          <el-input v-model="editingFavorite.name" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="editingFavorite.describe" type="textarea" :placeholder="editingFavorite.describe===null?'暂无简介':''" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="updateFavorite">保存</el-button>
        <el-button type="danger" @click="confirmDelete">删除</el-button>
      </template>
    </el-dialog>
    <!-- 文章详情内容 -->
    <PostItem
      v-for="post in posts"
      :key="post.id"
      :post="post"
      @like="handleLike"
      @toggle-expand="toggleExpand"
    />
  </UserLayout>
</template>
